<template>
  <div class="new-add">
    <div class="mask"></div>
    <div class="new_vs">
      <div class="title">
        <span>新建(厂商付款结账)</span>
        <i
          class="el-icon-close"
          style="font-size: 20px"
          @click="closeIconClick"
        ></i>
      </div>
      <div class="form-data">
        <div>
          <span class="mr-8">收款日期</span>
          <el-date-picker
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="requestData.sequenceTimeByString"
          >
          </el-date-picker>
        </div>
        <div class="cs">
          <span class="mr-8">厂商</span>
          <el-select
            v-model="requestData.manufacturerName"
            placeholder="请选择"
            @change="changeVendor"
            clearable
          >
            <el-option
              v-for="item in vendorList"
              :key="item.no"
              :label="item.name"
              :value="`${item.no},${item.name}`"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span class="mr-8">付款金额</span>
          <el-input
            v-model="requestData.money"
            @input="onInputMoney"
            @blur="onBlurMoney"
          ></el-input>
        </div>

        <div class="remark-wrap">
          <span class="remark">备注</span>
          <el-input v-model="requestData.remark" type="textarea"> </el-input>
        </div>
      </div>
      <div class="btns">
        <el-button @click="closeIconClick">取消</el-button>
        <el-button type="primary" @click="handleConfirmClick">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getManufacturer,
  addManufacturer
} from '@/request/accounting/ManufacturerPayment'
import { verifyNumber } from '@/util/regular'
import { formatNewDate } from '@/util/util'
export default {
  data() {
    return {
      requestData: {
        manufacturerNo: '', // 厂商编号
        manufacturerName: '', // 厂商名称
        sequenceTimeByString: '', // 日期
        money: null,
        remark: ''
      },

      vendorList: [] // 厂商
    }
  },
  created() {
    this.getManufacturer()
    let time = formatNewDate()
    this.requestData.sequenceTimeByString = time
  },
  methods: {
    async handleConfirmClick() {
      if (!this.requestData.sequenceTimeByString)
        return this.$message.error('请选择收款日期')
      if (!this.requestData.manufacturerNo)
        return this.$message.error('请选择厂商')
      let money = Number(this.requestData.money)
      const isNumber = verifyNumber(money)
      if (!isNumber) return this.$message.error('请输入付款金额')
      this.requestData.money = money
      const { data } = await addManufacturer(JSON.stringify(this.requestData))
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.$emit('sendNewData', data.data || {})
        this.closeIconClick()
      }
    },
    // 获取厂商
    async getManufacturer() {
      const { data } = await getManufacturer()
      if (data && data.code === 200) {
        this.vendorList = data.data
      }
    },
    // 选择厂商
    changeVendor(value) {
      if (value) {
        this.requestData.manufacturerNo = value.split(',')[0]
        this.requestData.manufacturerName = value.split(',')[1]
      } else {
        this.requestData.manufacturerNo = ''
        this.requestData.manufacturerName = ''
      }
    },
    onBlurMoney() {
      let money = Number(this.requestData.money)
      const isNumber = verifyNumber(money)
      if (!isNumber) {
        this.$message.error('请输入正确的金额')
        this.requestData.money = null
      }
    },
    onInputMoney(value) {
      // if()
    },
    // cahngeTime(date) {
    //   console.log(date)
    // },
    closeIconClick() {
      this.$emit('handleCloseNewAdd')
    }
  }
}
</script>

<style lang="less" scoped>
/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_vs {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  max-height: 700px;
  z-index: 99;
  background-color: white;
  overflow: auto;
  .title {
    padding: 10px;
    width: 100%;
    height: 48px;
    background: #f8f8f8;
    font-weight: bold;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .form-data {
    margin: 35px;
    height: 250px;
    min-height: 250px;
    overflow: hidden;
    overflow-y: scroll;
    div {
      margin-top: 8px;
    }
    .cs {
      margin-left: 32px;
    }
    .remark-wrap {
      display: flex;
      // align-items: center;
      .remark {
        width: 100px;
        padding-left: 32px;
      }
      .el-textarea {
        margin-right: 30px;
      }
    }
  }
  .btns {
    display: flex;
    justify-content: flex-end;
    margin: 16px;
  }
}
</style>
